<script lang="ts" setup name="CheckoutAddress">
import Message from '@/components/message'
import useStore from '@/store'
import { UserAddress } from '@/types/checkout'
import { CityResult } from '@/types/goods'
import { verify } from 'crypto'
import { ref, watch } from 'vue'
const { checkout } = useStore()
const visible = ref(false)

const formData = ref<UserAddress>({
  receiver: '',
  contact: '',
  provinceCode: '',
  cityCode: '',
  countyCode: '',
  address: '',
  postalCode: '',
  addressTags: '',
  isDefault: 1,
  fullLocation: '',
} as UserAddress)
// 接收city组件传过来的方法获取到选中的值
const changeAddress = (city: CityResult) => {
  formData.value.provinceCode = city.provinceCode
  formData.value.cityCode = city.cityCode
  formData.value.countyCode = city.countyCode
  formData.value.fullLocation =
    city.provinceName + ' ' + city.cityName + ' ' + city.countyName
}
// 对话框确认按钮
const confirm = () => {
  if (formData.value.id) {
    // 有id走修改
    checkout.updateAddress(formData.value)
  } else {
    // 没id走新增
    checkout.addAddress(formData.value as UserAddress)
  }
  Message.success('操作成功')
  visible.value = false
}
// 修改地址
const editAddress = () => {
  visible.value = true
  if (checkout.userAddress) {
    // 防止修改的时候，直接影响到当前显示的地址
    formData.value = {
      ...checkout.userAddress, //这时候已经有id了
    }
  }
}

// 关闭时重置表单
watch(visible, (value) => {
  if (!value) {
    formData.value = {
      receiver: '',
      contact: '',
      provinceCode: '',
      cityCode: '',
      countyCode: '',
      address: '',
      postalCode: '',
      addressTags: '',
      isDefault: 1,
      fullLocation: '',
    } as UserAddress
  }
})

// 切换地址
const toggleVisible = ref(false)
const selectedAddress = ref<UserAddress | null>()
// 设置默认高亮
watch(toggleVisible, (value) => {
  if (value) {
    selectedAddress.value = checkout.userAddress
  }
})
// 切换地址确认按钮
const changeAdd = async () => {
  if (selectedAddress.value) {
    await checkout.updateAddress({
      ...selectedAddress.value,
      isDefault: 0,
    })
    Message.success('切换地址成功')
    toggleVisible.value = false
  }
}
</script>
<template>
  <div class="checkout-address">
    <div class="text">
      <div class="none" v-if="!checkout.userAddress">
        您需要先添加收货地址才可提交订单。
      </div>
      <template v-else>
        <ul>
          <li>
            <span>收<i />货<i />人：</span>
            {{ checkout.userAddress.receiver }}
          </li>
          <li><span>联系方式：</span>{{ checkout.userAddress.contact }}</li>
          <li>
            <span>收货地址：</span
            >{{
              checkout.userAddress.fullLocation +
              ' ' +
              checkout.userAddress.address
            }}
          </li>
        </ul>
      </template>
      <a href="javascript:;" @click="editAddress">修改地址</a>
    </div>
    <div class="action">
      <XtxButton class="btn" @click="toggleVisible = true">切换地址</XtxButton>
      <XtxButton class="btn" @click="visible = true">添加地址</XtxButton>
    </div>
    <!-- 添加和修改收获地址对话框 -->
    <Teleport to="body">
      <XtxDialog
        :title="`${formData.id ? '修改收货地址' : '添加收货地址'}`"
        v-model:visible="visible"
      >
        <div class="xtx-form">
          <div class="xtx-form-item">
            <div class="label">收货人：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入收货人"
                v-model="formData.receiver"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">手机号：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入手机号"
                v-model="formData.contact"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">地区：</div>
            <div class="field">
              <XtxCity
                :userAddresses="formData.fullLocation"
                @changeAddress="changeAddress"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">详细地址：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入详细地址"
                v-model="formData.address"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">邮政编码：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入邮政编码"
                v-model="formData.postalCode"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">地址标签：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入地址标签，逗号分隔"
                v-model="formData.addressTags"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">默认地址：</div>
            <div class="field">
              <XtxSwitch
                :active-value="0"
                :inactive-value="1"
                v-model="formData.isDefault"
              ></XtxSwitch>
            </div>
          </div>
        </div>
        <template #footer>
          <XtxButton
            type="gray"
            style="margin-right: 20px"
            @click="visible = false"
          >
            取消
          </XtxButton>
          <XtxButton type="primary" @click="confirm">确认</XtxButton>
        </template>
      </XtxDialog>
    </Teleport>
    <!-- 切换收获地址对话框 -->
    <XtxDialog title="切换收货地址" v-model:visible="toggleVisible">
      <template #default>
        <div
          class="text item"
          :class="{ active: selectedAddress === item }"
          v-for="item in checkout.checkoutInfo.userAddresses"
          :key="item.id"
          @click="selectedAddress = item"
        >
          <ul>
            <li>
              <span>收<i />货<i />人：</span>{{ item.receiver }}
            </li>
            <li><span>联系方式：</span>{{ item.contact }}</li>
            <li>
              <span>收货地址：</span
              >{{ item.fullLocation.replace(/ /g, '') + item.address }}
            </li>
          </ul>
        </div>
      </template>
      <template #footer>
        <XtxButton
          type="gray"
          style="margin-right: 20px"
          @click="toggleVisible = false"
        >
          取消
        </XtxButton>
        <XtxButton type="primary" @click="changeAdd">确认</XtxButton>
      </template>
    </XtxDialog>
  </div>
</template>

<style scoped lang="less">
.checkout-address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    &.item {
      border: 1px solid #f5f5f5;
      margin-bottom: 10px;
      cursor: pointer;
      &.active,
      &:hover {
        border-color: @xtxColor;
        background: lighten(@xtxColor, 50%);
      }
      > ul {
        padding: 10px;
        font-size: 14px;
      }
    }
    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }
    > ul {
      flex: 1;
      padding: 20px;
      li {
        line-height: 30px;
        span {
          color: #999;
          margin-right: 5px;
          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
    > a {
      color: @xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }
  .action {
    width: 420px;
    text-align: center;
    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
.xtx-dialog {
  :deep(.wrapper) {
    width: 780px;
    .body {
      font-size: 14px;
    }
  }
}
.xtx-form {
  padding: 0;
  input {
    outline: none;
    &::placeholder {
      color: #ccc;
    }
  }
}
.xtx-city {
  width: 320px;
  :deep(.select) {
    height: 50px;
    line-height: 48px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    .placeholder {
      color: #ccc;
    }
    i {
      color: #ccc;
      font-size: 18px;
    }
    .value {
      font-size: 14px;
    }
  }
  :deep(.option) {
    top: 49px;
  }
}
.xtx-form-item .field {
  line-height: 50px;
}
</style>
